<template>
  <el-dialog title="添加房间"
             :close-on-click-modal="false"
             :visible.sync="dialogShow"
             width="840px"
             :before-close="handleClose">
    <p>
      <el-select v-model="queryParams.buildId"
                 style="width: 150px;"
                 placeholder="--楼栋--"
                 @change="cascade('builds')"
                 size="small">
        <el-option v-for="(item, index) in builds"
                   :key="index"
                   :label="item.number + '-' + item.unitNumber"
                   :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="queryParams.floorId"
                 style="width: 150px;"
                 placeholder="--楼层--"
                 size="small">
        <el-option v-for="(item, index) in floors"
                   :key="index"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
      <el-input v-model="queryParams.key"
                placeholder="请输入房间号"
                style="width: 150px;"
                size="small"></el-input>
      <el-button type="primary"
                 size="small"
                 @click="query()">搜索</el-button>
    </p>
    <el-table :data="tabData"
              v-if="dialogShow"
              ref="multipleTable"
              @selection-change="selectionChange"
              class="table-header-gray">
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column :label="item.label"
                       :prop="item.prop"
                       show-overflow-tooltip
                       v-for="(item, index) in columns"
                       :key="index"></el-table-column>
    </el-table>
    <pagenation :dataLength="total"
                :page="queryParams.page"
                :pageSize="queryParams.size"
                :handleSizeChange="handleSizeChange"
                :handleCurrentChange="handleCurrentChange" />
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="handleClose"
                 size="small">取 消</el-button>
      <el-button type="primary"
                 @click="sure"
                 size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  collegeListBuildingUsingGET,
  listFloorByBuildingIdUsingGET,
  pageRoomByBuildingIdAndUserUsingPOST
} from '@api/auto'
// import {
//   _listMajorByUser
// } from '@api/common'
import { pagination } from '@/tools/mixin'
export default {
  props: {
    dialogShow: Boolean,
    addForm: Object,
    mianTabData: Array,
    checkedTabData: Array
  },
  mixins: [pagination],
  data () {
    return {
      builds: [],
      floors: [],
      cascade (type) {
        const actions = new Map([
          ['builds', 'changeBuildings']
        ])
        let temp = actions.get(type)
        this[temp]()
      },
      // 楼栋change
      changeBuildings () {
        this.queryParams.floorId = null
        this.listFloorByBuildingIdUsingGET(this.queryParams.buildId)
      },
      activeName: 'first',
      // majorList: [],
      total: 0,
      queryParams: {
        page: 1,
        size: 10,
        key: '',
        buildId: null,
        floorId: null
      },
      checkedData: [],
      place2: [],
      tabData: [],
      columns: [
        { label: '校区', prop: 'schoolAreaName' },
        { label: '楼栋', prop: 'buildingName' },
        { label: '楼层', prop: 'floor' },
        { label: '房间号', prop: 'roomName' },
        { label: '空余床位', prop: 'bedNum' }
      ]
    }
  },
  created () {
    // _listMajorByUser().then(res => {
    //   this.majorList = res.data
    // })
    this.collegeListBuildingUsingGET()
  },
  watch: {
    dialogShow (newVal, oldVal) {
      if (newVal) {
        this.query()
      }
    }
  },
  methods: {
    // 获取楼栋
    collegeListBuildingUsingGET (id) {
      collegeListBuildingUsingGET(id).then(res => {
        this.builds = res.data
        // this.dialogForm.buildingId = res.data.length ? res.data[0].id : null
      })
    },
    // 获取房间
    listFloorByBuildingIdUsingGET (id) {
      listFloorByBuildingIdUsingGET(id).then(res => {
        this.floors = res.data
        // this.dialogForm.buildingId = res.data.length ? res.data[0].id : null
      })
    },
    handleClose () {
      this.queryParams = {
        page: 1,
        size: 10,
        key: '',
        buildId: null,
        floorId: null
      }
      this.$emit('handleClose')
    },
    selectionChange (data) {
      this.checkedData = data
    },
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      pageRoomByBuildingIdAndUserUsingPOST({ ...this.queryParams, gender: this.addForm.applianceSex }).then(res => {
        this.tabData = res.data.list
        this.total = res.data.total || 0
        this.$nextTick(function () {
          this.mianTabData.forEach(item => {
            this.$refs.multipleTable.toggleRowSelection(item)
          })
        })
      })
    },
    // handleSizeChange (val) {
    //   this.queryParams.size = val
    //   this.query()
    // },
    // handleCurrentChange (val) {
    //   this.queryParams.page = val
    //   this.query()
    // },
    sure () {
      this.checkedData.forEach(item => {
        if (!this.mianTabData.some(ele => {
          return ele.id === item.id
        })) {
          this.mianTabData.push({ ...item, weight: 0 })
          this.checkedTabData.push({ ...item, weight: 0 })
        }
      })
      this.handleClose()
    }
  }
}
</script>
